<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../../public/css/general.css">
    <link rel="stylesheet" href="../../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../../public/css/wechat/search.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="search">
    <div class="mask" v-if="isShowMask">
        <div class="change-num">
            <div class="top">输入数量</div>
            <div class="middle">
                <img @click="reduce()" src="../../../../public/images/reduce.png" alt="减">
                <input type="number" v-model.number="num">
                <img @click="plus()" src="../../../../public/images/plus.png" alt="加">
            </div>
            <div class="bottom">
                <div @click="cancel()" class="cancel">取消</div>
                <div @click="confirm()" class="confirm button-jb-g">确定</div>
            </div>
        </div>
    </div>
    <div class="top-bar" :style="{background: showSearchResult?'#FFF':'#FAFAFA'}">
        <a href="javascript:;" @click="goBack()">
            <i class="iconfont">&#xe665;</i>
        </a>
        <span class="search">
            <img src="../../../../public/images/search.png" alt="搜索">
            <input @focus="showSearchResult = false" :style="{background: !showSearchResult?'#FFF':'#FAFAFA'}" type="text" placeholder="请输入想搜索的相关商品名"
                   v-model.trim="searchValue">
        </span>
        <a href="javascript:;" @click="search()" class="button">
            搜索
        </a>
    </div>
    <!--历史搜索区域-->
    <div class="history-search" v-if="!showSearchResult">
        <div class="bar">
            <span>历史搜索</span>
            <img @click="clearHistorySearch()" src="../../../../public/images/del.png" alt="删除">
        </div>
        <div class="panel">
            <div class="search-info" v-for="s in historySearchList">
                <div @click="clickHistorySearch(s)" @touchstart.stop="s.isTouch=!s.isTouch"
                     @touchend.stop="s.isTouch=!s.isTouch" class="info" :class="{touch: s.isTouch}"
                     v-text="s.value"></div>
            </div>
        </div>
    </div>
    <!--搜索结果区域-->
    <div class="search-result" v-if="showSearchResult">
        <div class="result">
            <div class="panel" :class="{active: p.touch}" @touchstart="p.touch=true" @touchend="p.touch=false" v-for="p in searchResults">
                <div class="card">
                    <img @click="toShowDetails(p)" :src="p.img" :alt="p.name">
                    <div class="content">
                        <div @click="toShowDetails(p)" class="top bsz-text-ellipsis" v-text="p.name"></div>
                        <div class="middle bsz-text-ellipsis" v-text="p.norm"></div>
                        <div class="bottom">
                            <div class="money" v-text="'¥'+p.normList[0].price+'/'+p.normList[0].unit"></div>
                            <div class="button">
                                <img v-if="isShowMask && pId==p.id" src="../../../../public/images/reduce.png" alt="减">
                                <span v-if="isShowMask && pId==p.id" v-text="num">1</span>
                                <div @touchstart.prevent="p.normList[0].click=true" @touchend.prevent="clickPlus(p, p.normList[0])">
                                    <img v-show="!p.normList[0].click"  src="../../../../public/images/plus.png" alt="">
                                    <img v-show="p.normList[0].click" src="../../../../public/images/plus2.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bar">
            <div class="total">
                <span>
                    <img @click="isShowCart=!isShowCart" src="../../../../public/images/cart4.png" alt="">
                    <sup v-if="cartNum>0" v-text="cartNumFilter"></sup>
                </span>
                <span>合计：<span class="money" v-text="'¥'+cartTotal"></span></span>
            </div>
            <div @click="submitOrder()" class="button button-jb-g">去结算</div>
        </div>
        <div class="cart" v-if="isShowCart">
            <div class="top button-jb-g">
                <span>已选</span>
                <span @click="cartBarTip=(cartBarTip=='编辑'?'完成':'编辑')" v-text="cartBarTip">编辑</span>
            </div>
            <div class="cart-products">
                <div class="card" v-for="p in cartProducts">
                    <div class="product-name bsz-text-ellipsis" v-text="p.name"></div>
                    <div v-if="cartBarTip!='完成'" class="product-num bsz-text-ellipsis" v-text="'x'+p.num+'/'+p.unit"></div>
                    <div v-if="cartBarTip=='完成'" class="control">
                        <img @click="cartReduce(p)" src="../../../../public/images/reduce.png" alt="">
                        <input readonly type="number" v-model.number="p.num">
                        <img @click="cartPlus(p)" src="../../../../public/images/plus.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../../public/js/vue.js"></script>
<script src="../../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../../public/js/jquery.min.js"></script>
<script src="../../../../public/js/store.js"></script>
<script src="../../../../public/js/wechat/mixin.js"></script>
<script src="../../../../public/js/wechat/search/index.js"></script>
</body>
</html>